<template>
    <div class="contract">
        <el-container>

            <el-header style="height: auto">
                <nav-header></nav-header>
            </el-header>

            <el-main>
                <div class="mid-width">
                    <div class="text-el">
                        <div id="allmap"></div>
                    </div>
                </div>

            </el-main>

            <el-footer style="height: auto">
                <footer-bar></footer-bar>
            </el-footer>

        </el-container>
    </div>
</template>

<script>
    import NavHeader from '../components/header'
    import FooterBar from '../components/footer'
    import ContentDetail from '../components/contentDetail'
    export default {
        name: "detail",
        components: {
            NavHeader , FooterBar
        },
        methods:{
            createMaps(lon,lat){
                const map = new BMap.Map("allmap");
                map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
                map.enableScrollWheelZoom(true);

                function theLocation(){
                    map.clearOverlays();
                    const new_point = new BMap.Point(lon,lat);
                    const marker = new BMap.Marker(new_point);  // 创建标注
                    map.addOverlay(marker);              // 将标注添加到地图中
                    map.panTo(new_point);

                }

                theLocation()
            }
        },
        mounted() {
            this.createMaps(118.395732,24.967084)
        }
    }
</script>

<style lang="less" scoped>
    .contract{
        height: 100%;
        .text-el{
            min-height: 532px;
            border-radius: 5px;
            border: 1px solid #eee;
            padding: 20px;
            #allmap{
                width: 100%;
                min-height: 500px;
            }
        }
    }
</style>